<script setup lang="ts">
import { useSetting } from "../../store/manager/setting";
import { useAuth } from '../../store/auth';
import { get_self_info } from '~/utils/api';

const settingStore = useSetting();
const authStore = useAuth();

const __initialize = async () => {
    // 获取本地已经存在相关信息
    const userInfo = localStorage.getItem('user_info');
    const authMenus = localStorage.getItem('auth_menus');
    // 判断本地存在信息是否无效
    if (userInfo !== null || authMenus !== null) {
        // 本地存储数据有效，直接以本地数据为准
        authStore.setAuthMenus(JSON.parse(authMenus));
        authStore.setUserInfo(JSON.parse(userInfo));
    } else {
        // 本地数据无效，直接获取新的数据
        // 初始化获取当前用户信息
        await get_self_info().then((res) => {
            if (res.success) {
                // 用户信息写入本地存储
                localStorage.setItem('user_info', JSON.stringify(res.data.user_info));
                // 用户信息写入store
                authStore.setUserInfo(res.data.user_info);
                // 权限菜单信息写入本地存储
                localStorage.setItem('auth_menus', JSON.stringify(res.data.auth_menus));
                // 权限菜单信息写入store
                authStore.setAuthMenus(res.data.auth_menus);
            }
        }).catch((err) => {
            console.log(err);
        })
    }
}

onMounted(() => {
    __initialize();
})


</script>
<template>
    <div value="0" :style="{ height: 'calc(100vh - 56px)', background: 'var(--bg-color-page)' }">
        <t-menu :collapsed="settingStore.setting.leftNavigationIsCollapsed">
            <t-menu-item value="0" to="/manager/home">
                <template #icon>
                    <t-icon name="app" />
                </template>
                后台首页
            </t-menu-item>

            <t-submenu v-for="(item, index) in authStore.auth.authMenus" :value="item.auth_id" :title="item.title">
                <template #icon>
                    <t-icon :name="item.icon" />
                </template>
                <t-menu-item v-for="child in item.children" :value="item.auth_id + '-' + child.auth_id" :to="child.router">
                    <span>{{ child.title }}</span>
                </t-menu-item>

            </t-submenu>
        </t-menu>
    </div>
</template>
<style scoped></style>